<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>FPS监控</title>
  <link rel="stylesheet" href="./bootstrap4/bootstrap.min.css">
  <script src="./bootstrap4/jquery.min.js"></script>
  <script src="./bootstrap4/bootstrap.min.js"></script>
  <style>
    body {
      width: 250px;
      padding: 10px;
    }

    .alert {
      font-size: .875rem;
      padding: 8px;
      margin-bottom: 8px;
    }

    hr {
      margin: 8px 0px;
    }
  </style>
</head>

<body>
  <!-- 表单：CPU型号、显卡型号 -->
  <form action="http://localhost:3000/api/submit" method="post">
    <div class="input-group mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon-cpu">CPU</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入CPU型号" name="cpu" aria-describedby="basic-addon-cpu">
    </div>

    <div class="input-group mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon-gpu">GPU</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入显卡型号" name="gpu" aria-describedby="basic-addon-gpu">
    </div>

    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="upload"> 将数据上传到服务器
      </label>
    </div>
  </form>

  <hr>

  <div>
    <button id="start" type="button" class="btn btn-outline-primary btn-sm">开始记录帧率</button>
    <div id="info" class="alert alert-danger" role="alert">
      正在监控其他页面，<a id="link-stop" href="#" class="alert-link">停止记录帧率</a>
    </div>
    <button id="stop" type="button" class="btn btn-outline-danger btn-sm">停止记录帧率</button>
  </div>

  <script src="popup.js"></script>
</body>

</html>